<!-- 店铺管理 -->
<template>
  <div class="flexbox">
    <h2 style="color: #595959">{{ $t("messages.ShopManagement") }}</h2>
    <el-button
      style="color: #fff; width: 60px; height: 30px"
      :style="{ background: isEditing ? 'rgb(104, 215, 76)' : '#409eff' }"
      type="text"
      size="small"
      @click="handleAdd()"
    >
      {{ isEditing ? "确定" : "编辑" }}
    </el-button>
  </div>
  <el-form :model="form" label-width="100px">
    <el-form-item label="店铺名称">
      <el-input
        :disabled="!isEditing"
        v-model="form.name"
        style="width: 90%"
      ></el-input>
    </el-form-item>
    <el-form-item label="店铺公告">
      <el-input
        :disabled="!isEditing"
        v-model="form.bulletin"
        type="textarea"
        style="width: 90%"
      ></el-input>
    </el-form-item>
    <el-form-item label="店铺头像">
      <el-upload
        :disabled="!isEditing"
        class="avatar-uploader"
        action="http://127.0.0.1:5000/goods/goods_img_upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="form.avatar" :src="form.avatar" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item label="店铺图片">
      <el-upload
        :disabled="!isEditing"
        class="upload-demo"
        action="http://127.0.0.1:5000/shop/upload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        list-type="picture"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
      >
        <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item label="配送费">
      <el-input
        :disabled="!isEditing"
        v-model="form.deliveryPrice"
        style="width: 90%"
      ></el-input>
    </el-form-item>
    <el-form-item label="配送时间">
      <el-input
        :disabled="!isEditing"
        v-model="form.deliveryTime"
        style="width: 90%"
      ></el-input>
    </el-form-item>
    <el-form-item label="配送描述">
      <el-input
        :disabled="!isEditing"
        v-model="form.description"
        style="width: 90%"
      ></el-input>
    </el-form-item>
    <el-form-item label="店铺评分">
      <el-input
        :disabled="!isEditing"
        v-model="form.score"
        style="width: 90%"
      ></el-input>
    </el-form-item>
    <el-form-item label="销量">
      <el-input
        :disabled="!isEditing"
        v-model="form.sellCount"
        style="width: 90%"
      ></el-input>
    </el-form-item>
    <el-form-item label="活动">
      <el-checkbox-group :disabled="!isEditing" v-model="checkList">
        <el-checkbox label="在线支付满28减5">在线支付满28减5</el-checkbox>
        <el-checkbox label="VC无限橙果汁全场8折"
          >VC无限橙果汁全场8折</el-checkbox
        >
        <el-checkbox label="单人精彩套餐">单人精彩套餐</el-checkbox>
        <el-checkbox label="特价饮品8折抢购">特价饮品8折抢购</el-checkbox>
        <el-checkbox label="单人特色套餐">单人特色套餐</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="营业时间" style="width: 40%">
      <el-time-picker
        :disabled="!isEditing"
        is-range
        v-model="form.date"
        range-separator="至"
        start-placeholder="08:00:00"
        end-placeholder="22:30:00"
        placeholder="选择时间范围"
      >
      </el-time-picker>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
const headerImg = "http://127.0.0.1:5000/upload/shop/"; // 头像
const avatarHeaderImg = "http://127.0.0.1:5000/upload/imgs/acc_img/"; // 头像

// 引入上面定义的接口函数
import { getShopInfo, uploadShopImage, editShopInfo } from "@/api/index.js";

const isEditing = ref(false);
const form = ref({});
const checkList = ref([]); // 存储被勾选的复选框的 label 值
const fileList = ref([]);

const getShopInfoFn = async () => {
  const res = await getShopInfo();
  console.log("🚀 ~ getShopInfoFn ~ res:", res);
  res.data.avatar = `${headerImg}${res.data.avatar}`;
  const transformedPics = res.data.pics.map((pic) => ({
    url: `${headerImg}${pic}`, // 假设 pic 是图片名称或路径，需要与 headerImg 拼接成完整 URL
  }));

  fileList.value = transformedPics; //转换成url的数组格式
  form.value = res.data;
  checkList.value = res.data.supports;
  // console.log(form.value);
};

const handleAdd = async () => {
  isEditing.value = !isEditing.value;
  if (!isEditing.value) {
    const newCheckList = Object.values(checkList.value);
    const newdate = Object.values(form.value.date);
    const newpics = Object.values(form.value.pics);
    const res = await editShopInfo({
      id: form.value.id,
      name: form.value.name,
      bulletin: form.value.bulletin,
      avatar: "logo.png",
      deliveryPrice: form.value.deliveryPrice,
      deliveryTime: form.value.deliveryTime,
      description: form.value.description,
      score: form.value.score,
      sellCount: form.value.sellCount,
      supports: newCheckList,
      date: newdate,
      pics: newpics,
    });
    console.log("🚀 ~ handleAdd ~ res:", res);
  }
};

const handleAvatarSuccess = (response, file) => {
  // 处理头像上传成功的逻辑
  console.log("头像上传成功:", response);
};

const handlePreview = (file) => {
  // 处理图片预览的逻辑
  console.log("预览文件:", file);
};

const handleRemove = (file, fileList) => {
  // 处理图片移除的逻辑
  console.log("移除文件:", file, fileList);
};

const handleSuccess = (response, file, fileList) => {
  // 处理上传成功的逻辑
  console.log("上传成功:", response);
};

const handleError = (err, file) => {
  // 处理上传失败的逻辑
  ElMessage.error("图片上传失败");
  console.error("上传失败:", err);
};

const beforeUpload = (file) => {
  // // 创建 FormData 对象
  // const formData = new FormData();
  // formData.append("file", file); // 添加文件到 FormData 对象
  // // 调用 uploadShopImage 函数上传图片
  // uploadShopImage({
  //   file: formData,
  // })
  //   .then((response) => {
  //     // 上传成功的处理
  //     handleSuccess(response, file);
  //   })
  //   .catch((error) => {
  //     // 上传失败的处理
  //     handleError(error, file);
  //   });
  // // 阻止 el-upload 组件的默认上传行为
  // return false;
};

onMounted(() => {
  getShopInfoFn();
});
</script>

<style scoped lang="less">
.flexbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.upload-demo {
  width: 80%;
  display: flex;
  align-items: center;
}
::v-deep .el-upload-list {
  margin: 0;
  display: flex;
  align-items: center;

  flex-direction: row;
}
::v-deep .el-upload-list--picture .el-upload-list__item {
  margin: 0 5px;
  width: 130px;
  height: 130px;
  padding: 0;
}
::v-deep .avatar-uploader .avatar {
  width: 130px;
  height: 130px;
  display: block;
  overflow: hidden;
}
::v-deep .el-upload-list--picture .el-upload-list__item-thumbnail {
  width: 130px;
  height: 130px;
  display: block;
}
::v-deep .el-upload-list__item-status-label {
  z-index: 9;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  text-align: center;
  background: #ffffff;
  border: 1px dashed #c0c0c0;
  border-radius: 13px;
  margin-right: 5px;
}
</style>
